<script setup>
import { onMounted, reactive } from "vue";
import { showToast } from 'vant';
import { useI18n } from "vue-i18n"
import { getAddress, updateAddress } from "@/api"
import { useRouter } from "vue-router"
import Header from "@/components/Header.vue"
const router = useRouter();
const { t } = useI18n();
const state = reactive({
    name: "",
    tel: "",
    email: '',
    address: '',
    loading: false
})
const sure = () => {
    if (state.name == '') {
        showToast(t('Please set your real name'));
        return
    }
    if (state.tel == '') {
        showToast(t('Please set your phone number'));
        return
    }
    if (state.email == '') {
        showToast(t('Please set your detailed address'));
        return
    }
    if (state.address == '') {
        showToast(t('Please set your email'));
        return
    }
    state.loading = true;
    updateAddress({
        name: state.name,
        tel: state.tel,
        email: state.email,
        address: state.address
    }).then((res) => {
        console.log(res)
        router.go(-1);
        showToast(t('Successful operation'));
    }).catch(err => {
        console.log(err)
        showToast(err.msg);
    }).finally(() => {
        state.loading = false;
    })

}
onMounted(() => {
    init();
})
const init = () => {
    getAddress().then(res => {
        state.name = res?.name || '';
        state.tel = res?.tel || '';
        state.email = res?.email || '';
        state.address = res?.address || '';

    }).catch(err => {
        console.log(err)
    })
}
</script>
<template>
    <Header :title="$t('Shipping Address')"></Header>
    <div class="px-2 py-2">
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text" style="font-size: 0.4rem;">{{ $t('Real Name') }}</span>
            </div>
            <input type="text" :placeholder="$t('Please set your real name')" v-model="state.name"
                class="input input-bordered w-full max-w-xs max-h-5" style="font-size: 0.4rem;" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text" style="font-size: 0.4rem;">{{ $t('Phone Number') }}</span>
            </div>
            <input type="text" :placeholder="$t('Please set your phone number')" v-model="state.tel"
                class="input input-bordered w-full max-w-xs max-h-5" style="font-size: 0.4rem;" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text" style="font-size: 0.4rem;">{{ $t('Detailed Address') }}</span>
            </div>
            <input type="text" :placeholder="$t('Please set your detailed address')" v-model="state.address"
                class="input input-bordered w-full max-w-xs max-h-5" style="font-size: 0.4rem;" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text" style="font-size: 0.4rem;">{{ $t('Email') }}</span>
            </div>
            <input type="text" :placeholder="$t('Email')" v-model="state.email"
                class="input input-bordered w-full max-w-xs max-h-5" style="font-size: 0.4rem;" />
        </label>
        <div class="pt-4" @click="sure">
            <button class="btn btn-primary btn-xs w-full" :disabled="state.loading" style="font-size: 0.4rem;">
                {{ $t('Sure') }}
            </button>
        </div>
        <div class="p-2 italic">
            {{ $t('If you have any questions or need help, please contact online customer service to solve it for you')
            }}
        </div>
    </div>

</template>
